<template>
  <div>
    <!-- 顶部导航栏 -->
    <!-- <el-header class="custom-header">
      <div class="header-left">
        <span class="logo-title">作物标准象与象差知识库系统</span>
      </div>
    </el-header> -->
    
    <!-- 分类导航 -->
    <div>
      <el-menu 
        :default-active="activeIndex" 
        class="custom-menu" 
        mode="horizontal"
        @select="handleSelect">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">标准象百科</el-menu-item>
        <el-menu-item index="3">象差百科</el-menu-item>
        <el-menu-item index="4">知识检索</el-menu-item>
        <el-menu-item index="5" @click="handleSelect(5)">问答专区</el-menu-item>
      </el-menu>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="headline"></div>
      
      <div class="search-bar" :model="queryParams">
        <el-input 
                v-model="queryParams.zsQuestionTitle"
                placeholder="搜索问题"
                clearable
                @keyup.enter="handleQuery"
                prefix-icon="Search" 
          class="search-input"
          >
          <template #append>
            <el-button type="primary" @click="handleQuery" style="font-size:20px;color:#409EFF">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="hot-words">
        热门搜索：
        <el-link type="primary" @click="setKeyword('小麦赤霉病')">小麦赤霉病</el-link>
        <el-link type="primary" @click="setKeyword('玉米褐斑病')">玉米褐斑病</el-link>
      </div>
    </div>
    
    
    <!-- 问答专区 -->
    
    <div class="app-container home">
    <div class="question-list-container">
      <div class="question-header">
        <div class="header-left">
          <h2>问答社区</h2>
          <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd"
              class="add-btn"
          >发布问题</el-button>
        </div>
        <el-form :inline="true" :model="queryParams" class="search-form">
          <el-form-item style="width: 180px;">
            <el-select v-model="queryParams.zsQuestionType" placeholder="问题分类" clearable>
              <el-option
                  v-for="dict in question_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <el-row :gutter="20" v-loading="loading">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in questionList" :key="item.zsQuestionId">
          <el-card class="question-card" shadow="hover" >
            <div class="question-img-wrapper" v-if="item.zsQuestionImg" @click="showDetail(item)">
              <el-image
                  :src="getUrl(item.zsQuestionImg)"
                  fit="cover"
              />
              <div class="question-tag">
                <dict-tag :options="question_type" :value="item.zsQuestionType"/>
              </div>
            </div>
            <div class="question-info">
              <div class="question-main"  @click="showDetail(item)">
                <h3 class="question-title" :title="item.zsQuestionTitle">{{ item.zsQuestionTitle }}</h3>
                <p class="question-desc" :title="item.zsQuestionDescribe">{{ item.zsQuestionDescribe }}</p>
              </div>
              <div class="question-meta">
                <div class="meta-left">
                  <div class="meta-item">
                    <el-icon><User /></el-icon>
                    <span>{{ item.userName }}</span>
                  </div>

                </div>
                <div class="meta-right">
                  <div class="meta-item" @click="showDetail(item)">
                    <el-icon><ChatLineRound /></el-icon>
                    <span>{{ item.zsQuestionCommentNum }}</span>
                  </div>
                  <div class="meta-item like-item" @click.stop="handleLike(item)">
                    <el-icon><Pointer /></el-icon>
                    <span>{{ item.zsQuestionLikeNum }}</span>
                  </div>
                  <div class="meta-item action-item" v-if="isCurrentUserQuestion(item)" @click.stop="handleEdit(item)">
                    <el-icon><Edit /></el-icon>
                    <span>编辑</span>
                  </div>
                  <div class="meta-item action-item" v-if="isCurrentUserQuestion(item)" @click.stop="handleDelete(item)">
                    <el-icon><Delete /></el-icon>
                    <span>删除</span>
                  </div>
                </div>
              </div>

            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="pagination-container">
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="问题详情"
        width="80%"
        :close-on-click-modal="false"
        :show-close="true"
        class="question-detail-dialog"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="dialog-header">
          <h4 :id="titleId" :class="titleClass">问题详情</h4>
          <el-button
              type="text"
              @click="close"
              class="close-btn"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>
      <div class="question-detail" v-if="currentQuestion">
        <div class="detail-header">
          <h2>{{ currentQuestion.zsQuestionTitle }}</h2>
          <div class="detail-meta">
            <span class="author">
              <el-icon><User /></el-icon>
              {{ currentQuestion.userName }}
            </span>
            <span class="time">
              <el-icon><Timer /></el-icon>
              {{ parseTime(currentQuestion.createTime) }}
            </span>
            <dict-tag :options="question_type" :value="currentQuestion.zsQuestionType"/>
          </div>
        </div>
        <div class="detail-content">
          <p class="description">{{ currentQuestion.zsQuestionDescribe }}</p>
          <div class="detail-img" v-if="currentQuestion.zsQuestionImg">
            <el-image
                :src="getUrl(currentQuestion.zsQuestionImg)"
                :preview-src-list="[getUrl(currentQuestion.zsQuestionImg)]"
                fit="contain"
            />
          </div>
        </div>
        <div class="detail-footer">
          <div class="interaction">
            <span class="interaction-item">
              <el-icon><ChatLineRound /></el-icon>
              {{ currentQuestion.zsQuestionCommentNum }} 评论
            </span>
            <span class="interaction-item">
              <el-icon><Star /></el-icon>
              {{ currentQuestion.zsQuestionLikeNum }} 点赞
            </span>
          </div>
        </div>

        <!-- 评论区域 -->
        <div class="comment-section">
          <div class="comment-form">
            <h3>发表评论</h3>
            <el-form :model="commentForm" ref="commentFormRef">
              <el-form-item prop="zsCommentContent" :rules="[{ required: true, message: '请输入评论内容', trigger: 'blur' }]">
                <el-input
                    v-model="commentForm.zsCommentContent"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入您的评论..."
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitComment" :loading="commentSubmitting">发表评论</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="comment-list">
            <h3>全部评论 ({{ commentList.length }})</h3>
            <div v-if="commentLoading" class="comment-loading">
              <el-skeleton :rows="3" animated />
            </div>
            <div v-else-if="commentList.length === 0" class="no-comment">
              <el-empty description="暂无评论，快来发表第一条评论吧！" />
            </div>
            <div v-else class="comment-items">
              <!-- 顶级评论 -->
              <div v-for="comment in topLevelComments" :key="comment.zsCommentId" class="comment-item">
                <div class="comment-header">
                  <div class="comment-user">
                    <el-avatar :size="40" :src="getUserAvatar(comment.userName)">{{ comment.userName ? comment.userName.substring(0, 1) : 'U' }}</el-avatar>
                    <div class="user-info">
                      <div class="user-name">{{ comment.userName || '匿名用户' }}</div>
                      <div class="comment-time">{{ parseTime(comment.createTime) }}</div>
                    </div>
                  </div>
                </div>
                <div class="comment-content">{{ comment.zsCommentContent }}</div>
                <div class="comment-actions">
                  <span class="action-item" @click="replyToComment(comment)">
                    <el-icon><ChatDotRound /></el-icon> 回复
                  </span>
                </div>

                <!-- 回复表单 -->
                <div v-if="replyingTo === comment.zsCommentId" class="reply-form">
                  <el-input
                      v-model="replyForm.zsCommentContent"
                      type="textarea"
                      :rows="2"
                      :placeholder="`回复 ${comment.userName || '匿名用户'}...`"
                  />
                  <div class="reply-actions">
                    <el-button size="small" @click="cancelReply">取消</el-button>
                    <el-button size="small" type="primary" @click="submitReply(comment)" :loading="replySubmitting">回复</el-button>
                  </div>
                </div>

                <!-- 子评论 -->
                <div v-if="getChildComments(comment.zsCommentId).length > 0" class="child-comments">
                  <div v-for="childComment in getChildComments(comment.zsCommentId)" :key="childComment.zsCommentId" class="child-comment-item">
                    <div class="comment-header">
                      <div class="comment-user">
                        <el-avatar :size="30" :src="getUserAvatar(childComment.userName)">{{ childComment.userName ? childComment.userName.substring(0, 1) : 'U' }}</el-avatar>
                        <div class="user-info">
                          <div class="user-name">{{ childComment.userName || '匿名用户' }}</div>
                          <div class="comment-time">{{ parseTime(childComment.createTime) }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="comment-content">{{ childComment.zsCommentContent }}</div>
                    <div class="comment-actions">
                      <span class="action-item" @click="replyToComment(comment)">
                        <el-icon><ChatDotRound /></el-icon> 回复
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加或修改问答对话框 -->
    <el-dialog :title="dialogTitle" v-model="addDialogVisible" width="600px" append-to-body>
      <el-form ref="questionFormRef" :model="questionForm" :rules="questionRules" label-width="80px">
        <el-form-item label="问题标题" prop="zsQuestionTitle">
          <el-input v-model="questionForm.zsQuestionTitle" placeholder="请输入问题标题" />
        </el-form-item>
        <el-form-item label="问题描述" prop="zsQuestionDescribe">
          <el-input v-model="questionForm.zsQuestionDescribe" type="textarea" :rows="4" placeholder="请输入问题描述" />
        </el-form-item>
        <el-form-item label="问题分类" prop="zsQuestionType">
          <el-select v-model="questionForm.zsQuestionType" placeholder="请选择问题分类">
            <el-option
                v-for="dict in question_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题图片" prop="zsQuestionImg">
          <image-upload v-model="questionForm.zsQuestionImg" :limit="1"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="questionForm.remark" type="textarea" :rows="2" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitQuestionForm" :loading="questionSubmitting">确 定</el-button>
          <el-button @click="cancelQuestion">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </div>
</template>

<script setup>
import { ElHeader, ElMenu, ElMenuItem, ElIcon, ElSelect, ElOption, ElInput, ElButton, ElLink, ElCard } from 'element-plus';
import { User } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router'; // ⭐ 导入 useRouter
import { listQuestion, addQuestion, updateQuestion, delQuestion } from "@/api/agriculture/guo/zs/question";
import { listQuestionCommentByQuestionId, addComment } from "@/api/agriculture/guo/zs/QuestionComment";
import { addLike, checkLike } from "@/api/agriculture/guo/zs/questionLike";
import { getCurrentInstance, ref, reactive, toRefs, computed, onMounted } from 'vue'
import { parseTime } from '@/utils/ruoyi'
import useUserStore from '@/store/modules/user'

// const { question_type } = proxy.useDict('question_type');
const userStore = useUserStore();

const loading = ref(false);
const total = ref(0);
const questionList = ref([]);
const dialogVisible = ref(false);
const currentQuestion = ref(null);
const commentList = ref([]);
const commentLoading = ref(false);
const commentSubmitting = ref(false);
const replySubmitting = ref(false);
const replyingTo = ref(null);
const commentFormRef = ref(null);
const router = useRouter(); // ⭐ 获取 router 实例
const { proxy } = getCurrentInstance()
// ⚠️ 在 <script setup> 中不需要 defineComponent
// 直接从导入中使用组件

// 响应式变量
const activeIndex = ref('5');
const searchType = ref('search');
const searchKeyword = ref('');


const routerList = [  
  "",
  "CropIndex",           // 首页
  "copVarietyFront",      // 作物品种
  "CropDiseasePest", // 病虫害
  "CropGraph",           // 图谱
  "QA"               // 问答
];

// 记录已点赞的问题ID
const likedQuestions = ref(new Set());

// 检查问题是否已点赞
function isLiked(questionId) {
  return likedQuestions.value.has(questionId);
}

// 初始化时检查已点赞的问题
async function checkLikedQuestions() {
  if (!userStore.id) return;

  const promises = questionList.value.map(question =>
      checkLike(question.zsQuestionId, userStore.id)
          .then(response => {
            if (response.data) {
              likedQuestions.value.add(question.zsQuestionId);
            }
          })
          .catch(() => {})
  );

  await Promise.all(promises);
}

// 处理点赞
async function handleLike(question) {
  if (!userStore.id) {
    proxy.$modal.msgError('请先登录后再点赞');
    return;
  }

  const likeData = {
    zsQuestionId: question.zsQuestionId,
    userId: userStore.id,
    userName: userStore.name
  };

  try {
    await addLike(likeData);
    proxy.$modal.msgSuccess('点赞成功');
    likedQuestions.value.add(question.zsQuestionId);
    question.zsQuestionLikeNum += 1;
  } catch (error) {
    if (error.response?.data?.msg) {
      proxy.$modal.msgError(error.response.data.msg);
    } else {
      // proxy.$modal.msgError('点赞失败，请稍后重试');
    }
  }
}

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 12,
    zsQuestionTitle: null,
    zsQuestionType: null
  }
});

const commentForm = reactive({
  zsQuestionId: null,
  parentId: 0,
  zsCommentContent: '',
  userId: null,
  userName: '',
  deptId: null
});

const replyForm = reactive({
  zsQuestionId: null,
  parentId: null,
  zsCommentContent: '',
  userId: null,
  userName: '',
  deptId: null
});

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.zsQuestionTitle = '';
  queryParams.value.zsQuestionType = null;
  queryParams.value.pageNum = 1;
  getList();
}

// 初始化评论表单
function initCommentForm(questionId) {
  commentForm.zsQuestionId = questionId;
  commentForm.zsCommentContent = '';
  commentForm.parentId = 0;
  commentForm.userId = userStore.id || null;
  commentForm.userName = userStore.name || '';
  commentForm.deptId = null; // 如果需要部门ID，可以从用户信息中获取
}

// 初始化回复表单
function initReplyForm(questionId, parentId, replyToName) {
  replyForm.zsQuestionId = questionId;
  replyForm.zsCommentContent = '';
  replyForm.parentId = parentId;
  replyForm.userId = userStore.id || null;
  replyForm.userName = userStore.name || '';
  replyForm.deptId = null; // 如果需要部门ID，可以从用户信息中获取
}

/** 显示详情 */
function showDetail(question) {
  currentQuestion.value = question;
  dialogVisible.value = true;

  // 加载评论
  loadComments(question.zsQuestionId);

  // 重置评论表单
  initCommentForm(question.zsQuestionId);
}

/** 加载评论 */
function loadComments(questionId) {
  commentLoading.value = true;
  listQuestionCommentByQuestionId(questionId).then(response => {
    commentList.value = response.rows || [];
    commentLoading.value = false;

    // 更新评论数量显示
    if (currentQuestion.value) {
      currentQuestion.value.zsQuestionCommentNum = commentList.value.length;
    }
  }).catch(() => {
    commentLoading.value = false;
    commentList.value = [];
  });
}

/** 提交评论 */
function submitComment() {
  if (!commentForm.zsCommentContent.trim()) {
    proxy.$modal.msgError('评论内容不能为空');
    return;
  }

  commentSubmitting.value = true;
  addComment(commentForm).then(response => {
    proxy.$modal.msgSuccess('评论成功');
    commentForm.zsCommentContent = '';
    loadComments(currentQuestion.value.zsQuestionId);
    commentSubmitting.value = false;
  }).catch(() => {
    commentSubmitting.value = false;
  });
}

/** 回复评论 */
function replyToComment(comment) {
  replyingTo.value = comment.zsCommentId;
  initReplyForm(currentQuestion.value.zsQuestionId, comment.zsCommentId);
}

/** 取消回复 */
function cancelReply() {
  replyingTo.value = null;
}

/** 提交回复 */
function submitReply(comment) {
  if (!replyForm.zsCommentContent.trim()) {
    proxy.$modal.msgError('回复内容不能为空');
    return;
  }

  replySubmitting.value = true;
  addComment(replyForm).then(response => {
    proxy.$modal.msgSuccess('回复成功');
    replyingTo.value = null;
    loadComments(currentQuestion.value.zsQuestionId);
    replySubmitting.value = false;
  }).catch(() => {
    replySubmitting.value = false;
  });
}

// 获取用户头像
function getUserAvatar(userName) {
  if (!userName) return '';
  if (userName === userStore.name) {
    return userStore.avatar;
  }
  // 这里可以根据用户名生成不同颜色的头像
  return '';
}

// 计算顶级评论
const topLevelComments = computed(() => {
  return commentList.value.filter(comment => comment.parentId === 0 || !comment.parentId);
});

// 获取子评论
function getChildComments(parentId) {
  return commentList.value.filter(comment => comment.parentId === parentId);
}

function getUrl(coverPath) {
  // 使用环境变量获取基础URL或使用配置的URL
  const baseUrl = import.meta.env.VITE_APP_BASE_API;

  // 确保coverPath存在并且有值
  if (!coverPath) return new URL('@/assets/images/no-image.png', import.meta.url).href;

  // 确保路径正确（避免重复的斜杠）
  if (coverPath.startsWith('/')) {
    return baseUrl + coverPath;
  } else if (coverPath.startsWith('http')) {
    return coverPath;
  } else {
    return baseUrl + '/' + coverPath;
  }
}

const { queryParams } = toRefs(data);

/** 查询问答列表 */
async function getList() {
  loading.value = true;
  try {
    const response = await listQuestion(queryParams.value);
    questionList.value = response.rows;
    total.value = response.total;
    // 检查已点赞的问题
    await checkLikedQuestions();
  } catch (error) {
    // 处理错误
  } finally {
    loading.value = false;
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

// 初始化加载数据
getList();

const addDialogVisible = ref(false);
const questionSubmitting = ref(false);
const questionFormRef = ref(null);
const isEdit = ref(false);
const currentEditQuestion = ref(null);

const questionForm = reactive({
  zsQuestionId: null,
  zsQuestionTitle: '',
  zsQuestionDescribe: '',
  zsQuestionType: null,
  zsQuestionImg: '',
  remark: ''
});

const questionRules = reactive({
  zsQuestionTitle: [
    { required: true, message: '请输入问题标题', trigger: 'blur' }
  ],
  zsQuestionDescribe: [
    { required: true, message: '请输入问题描述', trigger: 'blur' }
  ],
  zsQuestionType: [
    { required: true, message: '请选择问题分类', trigger: 'change' }
  ]
});

/** 新增按钮操作 */
function handleAdd() {
  if (!userStore.id) {
    proxy.$modal.msgError('请先登录后再发布问题');
    return;
  }

  isEdit.value = false;
  currentEditQuestion.value = null;
  resetQuestionForm();
  addDialogVisible.value = true;
}

/** 编辑按钮操作 */
function handleEdit(question) {
  if (!userStore.id) {
    proxy.$modal.msgError('请先登录');
    return;
  }

  isEdit.value = true;
  currentEditQuestion.value = question;

  // 填充表单数据
  questionForm.zsQuestionId = question.zsQuestionId;
  questionForm.zsQuestionTitle = question.zsQuestionTitle;
  questionForm.zsQuestionDescribe = question.zsQuestionDescribe;
  questionForm.zsQuestionType = question.zsQuestionType;
  questionForm.zsQuestionImg = question.zsQuestionImg;
  questionForm.remark = question.remark;

  addDialogVisible.value = true;
}

/** 删除按钮操作 */
function handleDelete(question) {
  if (!userStore.id) {
    proxy.$modal.msgError('请先登录');
    return;
  }

  proxy.$modal.confirm('是否确认删除这个问题？').then(function() {
    return delQuestion(question.zsQuestionId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

// 表单重置
function resetQuestionForm() {
  questionForm.zsQuestionId = null;
  questionForm.zsQuestionTitle = '';
  questionForm.zsQuestionDescribe = '';
  questionForm.zsQuestionType = null;
  questionForm.zsQuestionImg = '';
  questionForm.remark = '';
  // 确保表单引用存在后再重置
  nextTick(() => {
    if (proxy.$refs.questionFormRef) {
      proxy.resetForm("questionFormRef");
    }
  });
}

// 取消按钮
function cancelQuestion() {
  addDialogVisible.value = false;
  resetQuestionForm();
  isEdit.value = false;
  currentEditQuestion.value = null;
}

/** 提交问题表单 */
function submitQuestionForm() {
  proxy.$refs["questionFormRef"].validate(valid => {
    if (valid) {
      questionSubmitting.value = true;

      const submitData = {
        ...questionForm,
        userId: userStore.id,
        userName: userStore.name,
        deptId: null
      };

      const apiCall = isEdit.value ? updateQuestion(submitData) : addQuestion(submitData);

      apiCall.then(response => {
        proxy.$modal.msgSuccess(isEdit.value ? "修改成功" : "发布成功");
        addDialogVisible.value = false;
        resetQuestionForm();
        isEdit.value = false;
        currentEditQuestion.value = null;
        getList(); // 刷新列表
        questionSubmitting.value = false;
      }).catch(() => {
        questionSubmitting.value = false;
      });
    }
  });
}

// 计算弹窗标题
const dialogTitle = computed(() => {
  return isEdit.value ? "修改问题" : "发布问题";
});

// 检查是否为当前用户的问题
function isCurrentUserQuestion(question) {
  return userStore.id && question.userId === userStore.id;
}

// 监听对话框打开事件，确保表单重置
watch(addDialogVisible, (newVal) => {
  if (newVal && !isEdit.value) {
    // 新增时确保表单完全重置
    nextTick(() => {
      resetQuestionForm();
    });
  }
});



const handleSelect = (key) => { 
  activeIndex.value = key;
  const routeName = routerList[key];
  router.push({ name: routeName }); 
};


const setKeyword = (word) => {
  data.queryParams.zsQuestionTitle = word

};
onMounted(() => {
  activeIndex.value = '5'; // 页面加载时默认选中“QA”页面
});
</script>

<style scoped>
/* 顶部导航栏 */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  background: linear-gradient(90deg, #1bbc9b, #17c2e6);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-title {
  font-weight: bold;
  font-size: 22px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

/* 分类导航 */
.custom-menu {
  border-bottom: 1px solid #e0e0e0;
  padding: 0 30px;
  font-size: 16px;
}

/* 搜索区域 */
.search-section {
  text-align: center;
  padding: 30px 20px;
  background-color: #f9f9f9;
}

.headline {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.search-select {
  width: 120px;
}

.search-input {
  width: 60vw;
  height: 50px;
}

.hot-words {
  font-size: 14px;
  color: #666;
}

.hot-words .el-link {
  margin-left: 10px;
}

/* 统计数据 */
.stats-section {
  display: flex;
  justify-content: center;
  gap: 10vw;
  flex-wrap: wrap;
  padding: 20px 0;
  background-color: #fff;
}

.stats-card {
  width: 140px;
  height: 140px;
  background-color: #f5f7fa;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.circle-number {
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background-color: #409EFF;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
}

.label {
  font-size: 16px;
  color: #333;
}

/* 内容区域 */
.pest-container {
  min-width: 900px;
  margin: 0 auto;
  padding: 10px 100px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", Arial, sans-serif;
}


/* 问答区域 */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.qa-item {
  display: flex;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s;
}

.qa-item:hover {
  border-color: #4caf50;
  background: rgba(46, 125, 50, 0.03);
}

.reward-tag {
  min-width: 80px;
  background: #FFC107;
  color: #333;
  border-radius: 4px;
  font-weight: 700;
  padding: 5px 10px;
  text-align: center;
  font-size: 0.9rem;
  height: fit-content;
}

.question-content {
  flex: 1;
  padding: 0 15px;
}

.question-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
}

.question-meta {
  display: flex;
  color: #909399;
  font-size: 0.85rem;
  gap: 15px;
}
</style>
<style scoped lang="scss">
.home {
  padding: 20px;

  .question-list-container {
    max-width: 1400px;
    margin: 0 auto;

    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      min-height: 60px; // 确保有足够的高度

      .header-left {
        display: flex;
        align-items: center;
        gap: 15px;
        height: 100%;

        h2 {
          margin: 0;
          font-size: 24px;
          color: #303133;
          line-height: 1;
          display: flex;
          align-items: center;
        }

        .add-btn {
          height: 36px;
          font-weight: 500;
          box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
          display: flex;
          align-items: center;

          &:hover {
            box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
          }
        }
      }

      .search-form {
        display: flex;
        gap: 10px;
        align-items: center;
        height: 100%;

        .el-form-item {
          margin-bottom: 0;
          display: flex;
          align-items: center;
        }
      }
    }

    .question-card {
      border-radius: 8px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
      }

      .question-img-wrapper {
        height: 200px;
        overflow: hidden;
        border-radius: 8px 8px 0 0;
        position: relative;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .question-tag {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1;
          background-color: rgba(255, 255, 255, 0.9);
          padding: 4px 8px;
          border-radius: 4px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      }

      .question-info {
        padding: 15px;
        .question-main {
          
          .question-title {
            margin: 0 0 10px;
            font-size: 16px;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .question-desc {
            color: #606266;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 42px;
          }
        }

        .question-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15px;
          padding-top: 15px;
          border-top: 1px solid #ebeef5;
          font-size: 13px;

          .meta-left, .meta-right {
            display: flex;
            gap: 15px;
          }

          .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #909399;

            .el-icon {
              font-size: 14px;
            }
          }

          .like-item {
            cursor: pointer;
            transition: all 0.3s;
            user-select: none; // 防止文字被选中

            .el-icon {
              font-size: 16px;
              transition: all 0.3s;
              color: #909399;

              &.is-liked {
                color: #ff4949;
                transform: scale(1.1);
              }
            }

            &:hover {
              .el-icon {
                transform: scale(1.1);
                color: #ff4949;
              }
            }

            &:active {
              transform: scale(0.95);
            }
          }

          .action-item {
            cursor: pointer;
            transition: all 0.3s;
            user-select: none;
            color: #409eff;

            .el-icon {
              font-size: 14px;
              transition: all 0.3s;
            }

            &:hover {
              color: #66b1ff;
              transform: scale(1.05);
            }

            &:active {
              transform: scale(0.95);
            }
          }
        }

        .question-tag {
          margin-top: 10px;
        }
      }
    }

    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }
}

.question-detail {
  .detail-header {
    margin-bottom: 20px;

    h2 {
      margin: 0 0 15px;
      font-size: 22px;
      color: #303133;
    }

    .detail-meta {
      display: flex;
      align-items: center;
      gap: 20px;
      color: #909399;
      font-size: 14px;

      .author, .time {
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }

  .detail-content {
    .description {
      font-size: 15px;
      line-height: 1.6;
      color: #606266;
      margin-bottom: 20px;
    }

    .detail-img {
      margin: 20px 0;

      .el-image {
        max-height: 400px;
        width: 100%;
        border-radius: 8px;
      }
    }
  }

  .detail-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;

    .interaction {
      display: flex;
      gap: 20px;

      .interaction-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #909399;
        font-size: 14px;
      }
    }
  }

  .comment-section {
    margin-top: 30px;

    .comment-form {
      margin-bottom: 30px;

      h3 {
        font-size: 18px;
        margin-bottom: 15px;
      }
    }

    .comment-list {
      h3 {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .no-comment {
        color: #909399;
        text-align: center;
        padding: 20px 0;
      }

      .comment-loading {
        padding: 20px 0;
      }

      .comment-items {
        .comment-item {
          padding: 20px 0;
          border-bottom: 1px solid #ebeef5;

          &:last-child {
            border-bottom: none;
          }

          .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            .comment-user {
              display: flex;
              align-items: center;

              .user-info {
                margin-left: 10px;

                .user-name {
                  font-weight: 500;
                  font-size: 15px;
                }

                .comment-time {
                  font-size: 12px;
                  color: #909399;
                  margin-top: 3px;
                }
              }
            }
          }

          .comment-content {
            margin-bottom: 10px;
            line-height: 1.6;
            font-size: 14px;
            white-space: pre-wrap;
            word-break: break-word;
          }

          .comment-actions {
            display: flex;
            justify-content: flex-end;

            .action-item {
              display: flex;
              align-items: center;
              gap: 4px;
              color: #409eff;
              cursor: pointer;
              font-size: 13px;

              &:hover {
                color: #66b1ff;
              }
            }
          }

          .reply-form {
            margin: 15px 0;
            padding: 15px;
            background-color: #f5f7fa;
            border-radius: 4px;

            .reply-actions {
              display: flex;
              justify-content: flex-end;
              margin-top: 10px;
              gap: 10px;
            }
          }

          .child-comments {
            margin-top: 15px;
            margin-left: 40px;
            padding: 10px 0;

            .child-comment-item {
              padding: 15px;
              background-color: #f5f7fa;
              border-radius: 4px;
              margin-bottom: 10px;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}

// 弹窗样式
:deep(.question-detail-dialog) {
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    h4 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }

    .close-btn {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 11;
      background: white;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      border: none;

      &:hover {
        background: #f5f7fa;
        transform: scale(1.1);
      }

      .el-icon {
        font-size: 18px;
        color: #909399;
      }

      &:hover .el-icon {
        color: #409eff;
      }
    }
  }

  .el-dialog__body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    padding: 20px;
  }
}
</style>

